<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" media="screen" href="/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" media="screen" href="/css/dataTables.bootstrap.min.css">
	<link rel="stylesheet" type="text/css" media="screen" href="/layui/css/layui.css">
	<script src="/js/libs/jquery-2.1.1.min.js"></script>
	<link rel="stylesheet" type="text/css" href="/css/bootstrap-select.min.css">
	<script src="/js/bootstrap/bootstrap.min.js"></script>
	<script src="/js/bootstrap/bootstrap-select.min.js"></script>
	<script src="/js/jq.js"></script>
	<script src="/js/plugin/bootstrapvalidator/bootstrapValidator.min.js"></script>
	<script src="/js/common.js"></script>
	<script src="/layui/layui.js"></script>
	<script src="/js/dict.js"></script>
	<script src="/js/libs/jquery.ztree.all-3.5.min.js"></script>
	<script src="/js/my/ztree-menu.js"></script>
	<script src="/js/my/permission.js"></script>
	<script src="/js/plugin/datatables/jquery.dataTables.min.js"></script>
	<script src="/js/plugin/datatables/dataTables.bootstrap.min.js"></script>
</head>
<body>
    <div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
			<header style="height: 100%">
				<div align="left">
					<table style="width: 100%">
						<tr>
							<td>
								<form class="form-inline" onsubmit="return false">
									<div class="form-group col-md-12">
										用户名：
										<input id="username" type="text" class="form-control" placeholder="用户名">
										昵称：
										<input id="nickname" type="text" class="form-control" placeholder="昵称">
										状态：
										<select class="form-control input-sm col-md-1 selectpicker show-tick" id="status" data-live-search="true">
										</select>
										部门：
										<input class='form-control' type='hidden' name='deptId' id='deptId'>
										<input class='form-control input-sm' type='text'
											   name='deptName' id='deptName' placeholder='所属部门' readonly >
										<a href="#" class="layui-btn layui-btn-sm"
												onclick="showTree('deptId', 'deptName', 'dept', '部门', '总公司', 'select')">
											<i class="layui-icon">&#xe615;</i>
										</a>
										<button id="searchBt" class="layui-btn layui-btn-sm search" ><i class="layui-icon">&#xe615;</i>搜索</button>
									</div>
								</form>
							</td>
							<td align="right">
								<button class="layui-btn layui-btn-sm" onclick="openIFrame('/pages/user/addUser.html','添加用户')" permission="sys:user:add">
								  <i class="layui-icon">&#xe608;</i> 添加
								</button>
							</td>
						</tr>
					</table>
				</div>
			</header>

			<div>
				<div class="widget-body no-padding">
					<table id="dt-table" class="table table-striped table-bordered table-hover" style="width:100%">
						<thead>
							<tr>
							</tr>
							<tr>
								<th>ID</th>
								<th>部门ID</th>
								<th>部门</th>
								<th>昵称</th>
								<th>用户名</th>
								<th>手机号</th>
								<th>邮箱</th>
								<th>状态</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
				</div>
			</div>
        </div>
    </div>
</body>
</html>
<script type="text/javascript">
	layui.use([ 'layer' ], function() {
		var layer = layui.layer;
	});
	var userStatus = showDictSelect("status", "userStatus", '请选择');

	var pers = checkPermission();

	var example;
	function init(){
        example =
            $('#dt-table').DataTable({
                "searching": false,
                "processing": false,
                "serverSide": true,
                "language": {
                    "url": "/js/plugin/datatables/Chinese.lang"
                },
                "ajax": {
                    "url": "/users",
                    "type": "get",
                    "data": function (d) {
                        d.username = $('#username').val();
                        d.nickname = $('#nickname').val();
                        d.status = $('#status').val();
                        d.deptId = $('#deptId').val();
                    },
                    "error": function (xhr, textStatus, errorThrown) {
                        var msg = xhr.responseText;
                        //console.log(msg)
                    }
                },
                "dom": "<'dt-toolbar'r>t<'dt-toolbar-footer'<'col-sm-10 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-10' p v>>",
                "columns": [
                    {"data": "id", "defaultContent": "", "visible": false},
                    {"data": "deptId", "defaultContent": "", "visible": false},
                    {"data": "deptName", "defaultContent": ""},
                    {"data": "nickname", "defaultContent": ""},
                    {"data": "username", "defaultContent": ""},
                    {"data": "phone", "defaultContent": ""},
                    {"data": "email", "defaultContent": ""},
                    {
                        "data": "status",
                        "defaultContent": "",
                        "render": function (data, type, row) {
                            if (data === 0) {
                                return "<label style='color: red'>" + userStatus[data] + "</label>";
                            } else if (data === 1) {
                                return "<label style='color: green'>" + userStatus[data] + "</label>";
                            } else if (data === 2) {
                                return "<label style='color: orange'>" + userStatus[data] + "</label>";
                            }

                        }
                    },
                    {
                        "data": "",
                        "defaultContent": "",
                        "orderable": false,
                        "render": function (data, type, row) {
                            var editable = row['editable'];
                            if (editable) {
                                var id = row['id'];
                                var href = "/pages/user/updateUser.html?id=" + id;
                                var edit = buttonEdit(href, "sys:user:add", pers);
                                var del = buttonDel(id, "sys:user:del", pers);
                                return edit + del;
                            }
                            return '';
                        }
                    },

                ],
                "order": [[1, "asc"], [2, "asc"]]
            });

        $('#dt-table').find('tbody').on('click', 'tr', function () {
            if ($(this).hasClass('success')) {
                $(this).removeClass('success');
            } else {
                example.$('tr.success').removeClass('success');
                $(this).addClass('success');
            }
        });
	}

	function del(id){
		layer.confirm('确定要删除吗？', {
			btn : [ '确定', '取消' ]
		}, function() {
			$.ajax({
				type : 'delete',
				url : '/users/' + id,
				success : function(data) {
					//console.log(data);
					layer.msg("删除成功", {shift: -1, time: 1000}, function(){
						location.reload();
					});
				}
			});
		});
	}

	$("#searchBt").click(function(){
		example.ajax.reload();
	});

	init();
</script>